<template>
  <div class="w-full h-full p-3 rounded-xl border-slate-200 bg-white">
    <div class="flex items-center mb-2">
      <div class="flex items-center bg-indigo-50/60 rounded-lg py-0.5 px-2">
        <i class="iconfont icon-shishikucunshiyitu text-indigo-500 text-base"/>
        <span class="title font-semibold text-indigo-600 ml-1.5">{{ $t('inventoryInforSummary.receivingOrders') }}</span>
      </div>
      <div class="flex-1 h-[1px] bg-gradient-to-r from-indigo-200 via-indigo-100/50 to-transparent ml-3"></div>
      <el-form :inline="true" :model="from" class="align-center search-form" style="margin-bottom: 10px">
        <el-form-item class="label" :label="$t('iot.time')">
          <el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                          style="width: 220px" v-model="from.time" type="daterange"
                          range-separator="-" :start-placeholder="$t('wms.startTime')"
                          :end-placeholder="$t('wms.endTime')" class="custom-date-picker"/>
        </el-form-item>
        <el-button icon="Search" class="buttons" size="small" type="primary" @click="getSerch" style="margin-top: 3px">
          {{ $t('wms.search') }}
        </el-button>
      </el-form>
    </div>
    <div class="w-full flex items-center mt-4" style="height: 88%">
      <div class="w-full h-full" style="border-radius: 16px;">
        <el-empty v-if="!list.length" :description="$t('mes.noDataYet')"/>
        <v-chart ref="currentRef" v-else  />
      </div>
    </div>
  </div>
</template>
<script setup>
import '@/assets/font/iconfont.css'
import { onMounted, reactive, ref } from 'vue'
import { materialsMenu } from '@/api/generalViewApi'
import * as echarts from 'echarts'
import moment from 'moment/moment'
import useI18n from '@/hooks/language'
const { t } = useI18n()
const currentRef = ref()
const title = ref([])
const list = ref([])
const lineData = ref([])
const from = reactive({
  time: [],
})

const renderOption = () => {
  return {
    grid: {
      left: '2%',
      right: '2%',
      bottom: '0',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: [t('common.warehouseIn'), t('common.warehouseOut')]
    },
    xAxis: [
      {
        type: 'category',
        data: title.value,
        axisLabel: {
          rotate: 30,
        },
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: t('wms.ark'),
        axisLine: {
          lineStyle: {
            color: '#37886c'
          }
        },
        axisLabel: {
          formatter: '{value}'
        }
      },

    ],
    series: [
      {
        name: t('common.warehouseIn'),
        type: 'bar',
        barWidth: '40%',
        tooltip: {
          valueFormatter: function (value) {
            return value
          }
        },
        itemStyle: {
          // 提供的工具函数生成渐变颜色
          color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0, 0, 0, 1,
            [{
              offset: 0,
              color: '#e8c44a'
            }, // 0 起始颜色
              {
                offset: 1,
                color: '#0061ce'
              } // 1 结束颜色
            ]
          )
        },
        label: {
          show: true, // 显示标签
          position: 'top', // 标签位置为顶部
          formatter: '{c}',// 标签内容格式，显示数据值
          color: '#37886c',
        },
        data: list.value
      },
      {
        name: t('common.warehouseOut'),
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value
          }
        },
        itemStyle: {
          // 提供的工具函数生成渐变颜色
          color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0, 0, 0, 1,
            [{
              offset: 0,
              color: '#4ae88e'
            }, // 0 起始颜色
              {
                offset: 1,
                color: '#0061ce'
              } // 1 结束颜色
            ]
          )
        },
        label: {
          show: true, // 显示标签
          position: 'top', // 标签位置为顶部
          formatter: '{c}',// 标签内容格式，显示数据值
          color: '#0f0667'
        },
        data: lineData.value
      }
    ]
  }
}

const materials = async () => {
 await materialsMenu({
    startTime: from.time[0],
    endTime: from.time[1]
  }).then(res => {
    if (res.code == 0) {
      title.value = []
      list.value = []
      lineData.value = []
      res.data.instockDataLists.forEach(item => {
        title.value.push(item.time)
        list.value.push(item.qty)
      })
      res.data.noInstockDataLists.forEach(item => {
        lineData.value.push(item.qty)
      })
    }
  })
}

// 查询
const getSerch = async () => {
  await materials()
  if (currentRef.value) {
    currentRef.value.setOption(renderOption())
  } else {
    setTimeout(() => {
      if (currentRef.value) {
        currentRef.value.setOption(renderOption())
      }
    }, 100)
  }
}

const getDefaultDateRange = () => {
  const start = moment().startOf('week').format('YYYY-MM-DD') // 本月一号
  const end = moment().format('YYYY-MM-DD') // 今天
  from.time = [start, end]
}

onMounted(async () => {
  await getDefaultDateRange()
  await materials()
  if (currentRef.value) {
    currentRef.value.setOption(renderOption())
  } else {
    setTimeout(() => {
      if (currentRef.value) {
        currentRef.value.setOption(renderOption())
      }
    }, 100)
  }
})
</script>

<style scoped lang="scss">
:deep(.el-form) {
  height: 18px;
  display: flex;
  justify-content: center;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1; /* 完全可见 */
  }
  50% {
    opacity: 0.5; /* 半透明 */
  }
}

.dynamic-text {
  font-size: 38px;
  font-weight: bold;
  background: linear-gradient(270deg, #120101, #01350b, #162c02);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient 3s ease infinite, blink 1s infinite; /* 应用渐变和闪烁动画 */
}

.card-box, .card-box2 {
  background-image: url("@/assets/images/bgcard.png");
  background-size: cover; /* 使背景图像覆盖整个元素 */
  background-position: center; /* 使背景图像居中 */
  background-repeat: no-repeat; /* 不重复背景图像 */
  padding-left: 30px;
  padding-top: 30px;
}

.card-box2 {
  transform: scaleX(-1);
  transform: scaleY(-1);
  padding-top: 26px;
}

.text-box {
  transform: scaleX(-1);
  transform: scaleY(-1);
  padding-top: 15px;
}
</style>
